{% extends "base.html" %}

{% block title %}首页 - Tiny QA{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-house"></i> 欢迎使用 Tiny QA
                </h5>
            </div>
            <div class="card-body">
                <p class="card-text">
                    Tiny QA 是一个智能知识库问答系统，可以帮助您快速构建和管理自己的知识库。
                </p>
                <div class="row">
                    <div class="col-md-6">
                        <div class="d-grid">
                            <a href="/qa" class="btn btn-primary">
                                <i class="bi bi-chat-dots"></i> 开始问答
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-grid">
                            <a href="/documents" class="btn btn-outline-primary">
                                <i class="bi bi-file-earmark-text"></i> 管理文档
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="bi bi-graph-up"></i> 系统状态
                </h6>
            </div>
            <div class="card-body">
                <div id="status-info">
                    <div class="text-center">
                        <div class="spinner-border spinner-border-sm" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">加载状态信息...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="bi bi-info-circle"></i> 快速开始
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <i class="bi bi-folder-plus text-primary" style="font-size: 2rem;"></i>
                            <h6 class="mt-2">1. 配置文档目录</h6>
                            <p class="text-muted small">在设置页面配置您的文档目录路径</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <i class="bi bi-search text-success" style="font-size: 2rem;"></i>
                            <h6 class="mt-2">2. 扫描文档</h6>
                            <p class="text-muted small">系统会自动扫描并识别支持的文档格式</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <i class="bi bi-gear text-warning" style="font-size: 2rem;"></i>
                            <h6 class="mt-2">3. 处理文档</h6>
                            <p class="text-muted small">将文档内容分块并向量化存储</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <i class="bi bi-chat-dots text-info" style="font-size: 2rem;"></i>
                            <h6 class="mt-2">4. 开始问答</h6>
                            <p class="text-muted small">基于知识库进行智能问答</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 检查首次运行
async function checkFirstRun() {
    try {
        const response = await fetch('/api/check-first-run');
        const data = await response.json();
        
        if (data.first_run_required) {
            // 跳转到首次运行配置页面
            window.location.href = '/first-run';
            return;
        }
    } catch (error) {
        console.error('检查首次运行状态失败:', error);
    }
}

// 页面加载时检查首次运行
window.addEventListener('load', checkFirstRun);

// 加载系统状态
function loadStatus() {
    fetch('/api/status')
        .then(response => response.json())
        .then(data => {
            const statusHtml = `
                <div class="row text-center">
                    <div class="col-4">
                        <h4 class="text-primary">${data.total_documents}</h4>
                        <small class="text-muted">总文档数</small>
                    </div>
                    <div class="col-4">
                        <h4 class="text-success">${data.processed_documents}</h4>
                        <small class="text-muted">已处理</small>
                    </div>
                    <div class="col-4">
                        <h4 class="text-info">${data.total_chunks}</h4>
                        <small class="text-muted">知识块</small>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" 
                             style="width: ${data.total_documents > 0 ? (data.processed_documents / data.total_documents * 100) : 0}%">
                        </div>
                    </div>
                    <small class="text-muted">处理进度: ${data.processing_rate}</small>
                </div>
            `;
            document.getElementById('status-info').innerHTML = statusHtml;
        })
        .catch(error => {
            document.getElementById('status-info').innerHTML = `
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle"></i> 无法加载状态信息
                </div>
            `;
        });
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    loadStatus();
});
</script>
{% endblock %} 